<template>
  <div class="detail">
    <!-- 头 -->
    <div class="header">
        <van-nav-bar title="详情页" @click-left="onClickLeft">
        <template #right>
            <van-popover
                v-model="showPopover"
                trigger="click"
                :actions="actions"
                placement="bottom-end"
                theme="dark"  
                @select="onSelect">
        <template #reference>
    <van-icon name="ellipsis" size="30" color="black"/>
  </template>
</van-popover>
    </template>
    <template #left>
        <van-icon name="arrow-left" size="30" color="black" />

    </template>
    </van-nav-bar>
    </div>
    <!-- 中间 -->
    <div class="container">
        <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
            <img :src="item" />
        </van-swipe-item>
    </van-swipe>
    <div class="price">
        <p>{{price}}</p>
    </div>
    <div class="title">
        <h4>{{title}}</h4>
    </div>
    </div>
    <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- <van-cell title="显示分享面板" @click="showShare = true" /> -->
    <!-- 控制面板 -->
        <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect1"
        />
  </div>
</template>

<script>
import { getBannerList } from '../api/detail';
import Vue from 'vue';
import { NavBar, Popover,ShareSheet,GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
Vue.use(NavBar);
Vue.use(Popover);
Vue.use(ShareSheet);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
export default {
    data () {
        return {
           bannerList:[],   
           showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [
        { text: '首页', icon: 'wap-home-o' },
        { text: '分享', icon: 'share-o' },
    ], 
    showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ], 
      price:0,
      title:""  
        }
    },
    created () {
        console.log(this.$route.params.proid);
        // 打开页面就发送请求
        getBannerList(this.$route.params.proid).then((data)=>{
            // console.log(data.data.data.banners[0].split(","));
            this.bannerList = data.data.data.banners[0].split(",");
            this.title = data.data.data.proname;
            this.price = data.data.data.originprice;
        })
    },
    methods:{
        onClickLeft(){
            this.$router.back();
        },
        onSelect(action,index) {
            switch (index) {
                case 0:
                    this.$router.push('/home')
                    break;
                case 1:
                    this.showShare=true
                    break;
                default:
                    break;
            }
    },
    onSelect1(option) {
      console.log(option.name);
      this.showShare = false;
    },
    }
}
</script>

<style scoped>
.my-swipe{
    height: 2.5rem;
}
.my-swipe img{
    width: 100%;
}
.price,title{
    padding: 0px 15px;
    margin: 10px 0;
}
</style>